//导入 Pagination 组件
import { Pagination } from 'antd';
import React, { useState } from 'react';

const PageCom: React.FC = () => {
  //定义状态
  let [current, setCurrent] = useState(1);
  let [pageSize, setPageSize] = useState(5);

  return <Pagination
    current={current}
    total={50}
    pageSize={pageSize}
    //显示快速跳转的结构
    showQuickJumper
    showTotal={(total) => {
      return `当前总计 ${total} 条数据`;
    }}
    //显示改变每页数量的结构
    showSizeChanger
    //数量切换的选项
    pageSizeOptions={[5, 10, 15, 20]}
    onChange={(page, pageSize) => {
      // console.log(page, pageSize);
      //更新当前页码数
      setCurrent(page);
      //更新当前每页显示的数量
      setPageSize(pageSize);
    }} />;
}

export default PageCom;
